<template>
    <view class="lsj-file" :style="[getStyles]">
        <view ref="lsj" class="hFile" :style="[getStyles]" @click="onClick">
            <slot>
                <view class="defview" :style="[getStyles]">附件上传</view>
            </slot>
        </view>
    </view>
</template>

<script>
// 查看文档：https://ext.dcloud.net.cn/plugin?id=5459
import { LsjFile } from './LsjFile.js'
export default {
    name: 'Lsj-upload',
    props: {
        // 打印日志
        debug: { type: Boolean, default: false },
        // 自动上传
        instantly: { type: Boolean, default: false },
        // 上传接口参数设置
        option: { type: Object, default: () => { } },
        // 文件大小上限
        size: { type: Number, default: 10 },
        // 文件选择个数上限,超出后不触发点击
        count: { type: Number, default: 9 },
        // 允许上传的文件格式（多个以逗号隔开）
        formats: { type: String, default: '' },
        // input file选择限制
        accept: { type: String, default: '' },
        // 微信选择文件类型 
        //all=从所有文件选择，
        //video=只能选择视频文件，
        //image=只能选择图片文件，
        //file=可以选择除了图片和视频之外的其它的文件
        wxFileType: { type: String, default: 'all' },
        // webviewID需唯一，不同窗口也不要同Id
        childId: { type: String, default: 'lsjUpload' },
        // 文件选择触发面宽度
        width: { type: String, default: '100%' },
        // 文件选择触发面高度
        height: { type: String, default: '80rpx' },

        // top,left,bottom,right仅position=absolute时才需要传入
        top: { type: [String, Number], default: '' },
        left: { type: [String, Number], default: '' },
        bottom: { type: [String, Number], default: '' },
        right: { type: [String, Number], default: '' },
        // nvue不支持跟随窗口滚动
        position: {
            type: String,
            // #ifdef APP-NVUE
            default: 'absolute',
            // #endif
            // #ifndef APP-NVUE
            default: 'static',
            // #endif
        },
    },
    data() {
        return {

        }
    },
    watch: {
        option(v) {
            // #ifdef APP-PLUS
            this.lsjFile && this.show();
            // #endif
        }
    },
    updated() {
        // #ifdef APP-PLUS
        if (this.isShow) {
            this.lsjFile && this.show();
        }
        // #endif
    },
    computed: {
        getStyles() {
            let styles = {
                width: this.width,
                height: this.height
            }
            if (this.position == 'absolute') {
                styles['top'] = this.top
                styles['bottom'] = this.bottom
                styles['left'] = this.left
                styles['right'] = this.right
                styles['position'] = 'fixed'
            }

            return styles
        }
    },
    mounted() {
        this._size = 0;
        let WEBID = this.childId + new Date().getTime();
        this.lsjFile = new LsjFile({
            id: WEBID,
            debug: this.debug,
            width: this.width,
            height: this.height,
            option: this.option,
            instantly: this.instantly,
            // 限制条件
            prohibited: {
                // 大小
                size: this.size,
                // 允许上传的格式
                formats: this.formats,
                // 限制选择的格式
                accept: this.accept,
                count: this.count
            },
            onchange: this.onchange,
            onprogress: this.onprogress,
        });
        this.create();

    },
    beforeDestroy() {
        // #ifdef APP-PLUS
        this.lsjFile.dom.close();
        // #endif
    },
    methods: {
        setFiles(array) {
            if (array instanceof Map) {
                for (let [key, item] of array) {
                    item['progress'] = 100;
                    item['type'] = 'success';
                    this.lsjFile.files.set(key, item);
                }
            }
            else if (Array.isArray(array)) {
                array.forEach(item => {
                    if (item.name) {
                        item['progress'] = 100;
                        item['type'] = 'success';
                        this.lsjFile.files.set(item.name, item);
                    }
                });
            }
            this.onchange(this.lsjFile.files);
        },
        setData() {
            this.lsjFile && this.lsjFile.setData(...arguments);
        },
        getDomStyles(callback) {
            // #ifndef APP-NVUE
            let view = uni
                .createSelectorQuery()
                .in(this)
                .select('.lsj-file')
            view.fields(
                {
                    size: true,
                    rect: true
                },
                ({ height, width, top, left, right, bottom }) => {
                    uni.createSelectorQuery()
                        .selectViewport()
                        .scrollOffset(({ scrollTop }) => {
                            return callback({
                                top: parseInt(top) + parseInt(scrollTop) + 'px',
                                left: parseInt(left) + 'px',
                                width: parseInt(width) + 'px',
                                height: parseInt(height) + 'px'
                            })
                        })
                        .exec()
                }
            ).exec()
            // #endif
            // #ifdef APP-NVUE
            const dom = weex.requireModule('dom')
            dom.getComponentRect(this.$refs.lsj, ({ size: { height, width, top, left, right, bottom } }) => {
                return callback({
                    top: parseInt(top) + 'px',
                    left: parseInt(left) + 'px',
                    width: parseInt(width) + 'px',
                    height: parseInt(height) + 'px',
                    right: parseInt(right) + 'px',
                    bottom: parseInt(bottom) + 'px'
                })
            })
            // #endif
        },
        show() {
            if (this._size && (this._size >= this.count)) {
                return;
            }
            this.isShow = true;
            // #ifdef APP-PLUS
            this.lsjFile && this.getDomStyles(styles => {
                this.lsjFile.dom.setStyle(styles)
            });
            // #endif
            // #ifdef H5
            this.lsjFile.dom.style.display = 'inline'
            // #endif
        },
        hide() {
            this.isShow = false;
            // #ifdef APP-PLUS
            this.lsjFile && this.lsjFile.dom.setStyle({
                top: '-100px',
                left: '0px',
                width: '1px',
                height: '100px',
            });
            // #endif
            // #ifdef H5
            this.lsjFile.dom.style.display = 'none'
            // #endif
        },
        /**
         * 手动提交上传
         * @param {string}name 文件名称，不传则上传所有type等于waiting和fail的文件
         */
        upload(name) {
            this.lsjFile && this.lsjFile.upload(name);
        },
        /**
         * @returns {Map} 已选择的文件Map集
         */
        onchange(files) {
            this.$emit('change', files);
            this._size = files.size;
            return files.size >= this.count ? this.hide() : this.show();
        },
        /**
         * @returns {object} 当前上传中的对象
         */
        onprogress(item, end = false) {
            this.$emit('progress', item);
            if (end) {
                setTimeout(() => {
                    this.$emit('uploadEnd', item);
                }, 0);
            }
        },
        /**
         * 移除组件内缓存的某条数据
         * @param {string}name 文件名称,不指定默认清除所有文件
         */
        clear(name) {
            this.lsjFile.clear(name);
        },
        // 创建选择器
        create() {
            // 若iOS端服务端处理不了跨域就将hybrid目录内的html放到服务端去，并将此处path改成服务器上的地址
            let path = '/uni_modules/lsj-upload/hybrid/html/uploadFile.html';
            let dom = this.lsjFile.create(path);
            // #ifdef H5
            this.$refs.lsj.$el.appendChild(dom);
            // #endif
            // #ifndef APP-PLUS
            this.show();
            // #endif
            // #ifdef APP-PLUS
            dom.setStyle({ position: this.position });
            dom.loadURL(path);
            setTimeout(() => {
                // #ifdef APP-NVUE
                plus.webview.currentWebview().append(dom);
                // #endif
                // #ifndef APP-NVUE
                this.$root.$scope.$getAppWebview().append(dom);
                // #endif
                this.show();
            }, 300)
            // #endif
        },
        // 点击选择附件
        onClick() {
            if (this._size >= this.count) {
                this.toast(`只允许上传${this.count}个文件`);
                return;
            }

            // #ifdef MP-WEIXIN
            if (!this.isShow) { return; }
            let count = this.count - this._size;
            this.lsjFile.chooseMessageFile(this.wxFileType, count);
            // #endif
        },
        toast(msg) {
            uni.showToast({
                title: msg,
                icon: 'none'
            });
        }
    }
}
</script>

<style scoped>
.lsj-file {
    display: inline-block;
}

.defview {
    background-color: #007aff;
    color: #fff;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
}

.hFile {
    position: relative;
    overflow: hidden;
}
</style>
